<!DOCTYPE html>
<html>
<head>

</head>
<script type="text/javascript" src="/javascripts/echarts.common.min.js"></script>
<script type="text/javascript" src="/javascripts/socket.io.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<body>

<div class="chart-wrap" id="chart-wrap" style="width:500px;height:300px"></div>

<script type="text/javascript">
    const hostname = '192.168.1.105';
    const port = 3000;
    var socket = io.connect("192.168.1.105:3000");
    var mychart = echarts.init(document.getElementById("chart-wrap"));
    var num = 0;
    var option = {
        title: {
            text: '当前实时温湿度波动情况',
            subtext: '3秒更新'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['温度','湿度']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['0','1','2','3','4','5','6']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name:'温度',
                type:'line',
                data:[20, 23, 25, 19, 22, 23, 20],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'相对湿度',
                type:'line',
                data:[45,42, 42, 45, 43, 42, 40],
                markPoint: {
                    data: [
                        {name: '最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                normal: {
                                    position: 'start',
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };
    var drawChart = function(data){
        if (num >= 6){
            var timestamp = new Date(parseInt(data.time*1000));
            var hour = timestamp.getHours();
            var min = timestamp.getMinutes();
            var sec = timestamp.getSeconds();
            console.log(parseInt(data.time*1000));
            // console.log(timestamp.getFullYear());
            option.xAxis.data[num] = '' + hour + ':' + min + ':' + sec;
            option.series[0].data[num] = data.tmp;
            option.series[1].data[num] = data.rh;
            num = -1 ;
        }
        else{
            var timestamp = new Date(parseInt(data.time*1000));
            var hour = timestamp.getHours();
            var min = timestamp.getMinutes();
            var sec = timestamp.getSeconds();
            option.xAxis.data[num] = '' + hour + ':' + min + ':' + sec;
            option.series[0].data[num] = data.tmp;
            option.series[1].data[num] = data.rh;
        }
        mychart.setOption(option);
    };

</script>
<script>
$(function() {
        mychart.setOption(option);

	    socket.on('dy_data',function(data){
        	num++;
        	console.log("get data : \n " + data);
        	drawChart(data);
	    });
});
</script>

</body>
</html>